<style lang="scss" scoped>
	.container{
		width: 100vw;
		min-height: 100vh;
		background-color: $uni-bg-color-grey;
	}
	.dialog{
		background-color: #fff;
		width: 80%;
		overflow: hidden;
		.header{
			width: 100%;
			background-color: $uni-color-primary;
			color: #fff;
			font-size: 42rpx;
		}
		.body .item{
			color: #666;
			font-size: 30rpx;
			.label{
				display: table;
				min-width: 200rpx;
				text-align: right;
			}
			text{
				display: block;
			}
			
		}
	}
	.blue{
		color: $uni-color-primary;
	}
</style>
<template>
	<view class="container">
		<view class="pt-3"></view>
		<view class="dialog box-shadow mx-auto border-radius mb-3">
			<text class="py-2 header text-center d-block">{{dept}}</text>
			<view class="body p-2">
				<view class="item my-3 d-flex" v-for="(val,key,index) in list" :key="index">
					<text class="label mr-2">{{key}}：</text>
					<text class="content blue" v-if="key=='联系电话'" @click="callTel">{{val}}</text>
					<text class="content" v-else>{{val}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getDeptDetails} from "@api"
	export default {
		data() {
			return {
				dept:'',
				format:{
					tel:'联系电话',
					name:'联系人',
					url:"网址",
					mail:'邮箱',
					address:'单位地址',
					duty:'服务职责'
				},
				list:{}
			}
		},
		methods: {
			callTel(){
				uni.makePhoneCall({
				    phoneNumber: this.list['联系电话'] 
				});
			}
		},
		onLoad(option) {
			this.dept=option.dept
			getDeptDetails(option)
			.then(res=>{
				if(!res.data){
					uni.showModal({
						title: '提示',
						content: '尚未录入该部门！',
						showCancel:false,
						confirmText:'返回',
						success:function(){
							uni.navigateBack()
						}
					})
				}else{
					const obj={}
					for (let params in this.format) {
						if(res.data[params])
							obj[this.format[params]]=res.data[params]
					}
					this.list=obj
				}
				
			})
		}
	}
</script>